<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>Analysis Result Visualization</title>
    <!-- 引入 ECharts 库 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/echarts/5.3.3/echarts.min.js"></script>
</head>
<body>
<h1>数据分析</h1>
<p>当前时间: <span th:text="${serverTime}"></span></p>
<div id="main" style="width: 600px;height:400px;"></div>

<script type="text/javascript" th:inline="javascript">
    /*<![CDATA[*/
    // 确保 DOM 完全加载后再执行脚本
    document.addEventListener('DOMContentLoaded', function() {
        // Initialize the chart
        var myChart = echarts.init(document.getElementById('main'));

        // Data from the server
        var analysisResults = [[${analysisResults}]];

        // Prepare data for ECharts
        var categories = [];
        var values = [];

        // 检查数据是否存在
        if (analysisResults && analysisResults.length > 0) {
            for (var i = 0; i < analysisResults.length; i++) {
                categories.push(analysisResults[i].word); // 使用 word 字段
                values.push(analysisResults[i].count); // 使用 count 字段
            }
        } else {
            console.error("No data available for visualization.");
        }

        // Chart options
        var option = {
            title: {
                text: 'Analysis Results'
            },
            tooltip: {},
            xAxis: {
                type: 'category',
                data: categories,
                axisLabel: {
                    interval: 0, // 强制显示所有标签
                    rotate: 45,  // 可选：旋转标签以节省空间
                    margin: 15   // 增加标签与轴之间的距离
                }
            },
            yAxis: {
                type: 'value'
            },
            series: [{
                data: values,
                type: 'bar'
            }]
        };

        // Set the options and render the chart
        myChart.setOption(option);
    });
    /*]]>*/
</script>
</body>
</html>